class MiniVue {
  constructor(options) {
    // 参数参数化
    this.$options = options
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
    this.$data = options.data
    // 将响应式数据代理到miniVue实例中
    this.proxyData(this.$data)
    // ji
    this.proxyMethod(this.$options.methods)
    // 数据劫持 将$data数据变成响应式的
    new Observer(this.$data)
    // 编译模板
    new Compile(this)
  }
  // 将$data数据代理到vue实例中
  proxyData(data) {
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return data[key] // 访问响应式里面的数据
        },
        set(val) {
          if(data[key] === val) {
            return
          }
          data[key] = val // 设置
        }
      })
    })
  }
  proxyMethod(methods) {
    Object.keys(methods).forEach(methodName => {
      this[methodName] = methods[methodName]
    })
  }
}